<template>
    <div class="search-box">
        <advance-query :visible="show">
            <cond-form ref="cond" :condOpt="seniorOpt" :viewObj="viewObj"></cond-form>
            <div slot="foot">
                <el-button type="success" @click="advanceQuery">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="toggleShow">取消</el-button>
            </div>
        </advance-query>
        <div class="status-bar" v-if="isView && this.viewObj.groupFieldCode && groupOpt.length">
            <span :class="{'active': groupValue == ''}" @click="clickGroup({label: '所有', value: ''})">所有</span>
            <span :class="{'active': groupValue == item.value}" v-for="item of groupOpt" :key="item.value" @click="clickGroup(item)">{{ item.label }}</span>
        </div>
        <div class="search-form">
            <div class="search-input">
                <cond-form-input ref="cond2" :condOpt="fastOpt"></cond-form-input>
            </div>
            <el-button type="success" @click="clickQuery">搜索</el-button>
            <el-button @click="resetForm2">
                <i class="iconfont icon-reset"></i>
                重置
            </el-button>
            <el-button type="success" @click="toggleShow">
                <i class="fa fa-angle-down"></i>
                筛选
            </el-button>
        </div>
        <div class="btn-wrap">
            <slot name="button"></slot>
        </div>
    </div>
</template>

<script>
import advanceQuery from "@/components/advanceQuery";
import condForm from './child/condForm';
import condFormInput from './child/condFormInput';
import { queryAllField } from '@/service/core/queryView';
import { dictionary } from '@/service/core/dictionary';
export default {
    name: 'SearchBar', // 搜索栏
    props: {
        isView: { // 是否来自视图
            type: Boolean,
            default: false
        },
        viewObj: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    components: { advanceQuery, condForm, condFormInput },
    data() {
        return {
            show: false,
            ruleForm: {
                name: '',
            },
            moduCode: '',
            condOpt: [],
            groupOpt: [],
            groupValue: '',
        }
    },
    watch: {
        viewObj: {
            handler: function(val) {
                this.$refs.cond.setData(this.viewObj);
                this.queryGroupOpt();
                setTimeout(() => {
                    this.clickQuery();
                }, 200)
            },
            deep: true
        } 
    },
    computed: {
        seniorOpt() { // 高级查询选项
            return this.condOpt.filter(item => item.isExcludeSenior != 1);
        }, 
        fastOpt() { // 快捷查询选项
            return this.condOpt.filter(item => item.isExcludeFast != 1);
        }
    },
    created() {
        this.moduCode = this.$route.query.m;
        this.queryAllFieldFun();
    },
    methods: {
        advanceQuery() {
            this.$refs.cond.getData().then(data => {
               this.$emit('search', {
                   senior_conds: JSON.stringify(data), // 高级查询条件
                   fast_conds: JSON.stringify([]) // 快捷查询条件
               });
               this.show = false;
            }).catch(() => {})
        },
        clickQuery() {
            this.$refs.cond2.getData().then(data => {
                this.$emit('search', {
                   senior_conds: this.isView ? this.viewObj.conds : JSON.stringify([]), // 高级查询条件
                   fast_conds: JSON.stringify(data) // 快捷查询条件
               });
            })
        },
        toggleShow() {
            this.show = !this.show;
        },
        resetForm() { // 高级查询 重置
            this.$refs.cond.resetFields();
            this.$nextTick(() => {
                this.advanceQuery();
            })
        },
        resetForm2() { // 快捷查询 重置
            this.groupValue = '';
            this.$refs.cond2.resetFields();
            this.$nextTick(() => {
                this.clickQuery();
            })
        },
        resetForm3() { // 
            this.groupValue = '';
        },
        queryAllFieldFun() { // 查询模块下的所有字段
            if(!this.moduCode) return;
            let params = {
                moduId: this.moduCode,
                searchType: null
            }
            queryAllField(params).then(res => {
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(Array.isArray(data)) {
                        this.condOpt = data.map(item => {
                            return {
                                ...item,
                                label: item.fieldName,
                                value: item.fieldCode
                            }
                        })
                    }
                }
            })
        },
        clickGroup(item) {
            this.groupValue = item.value;
            this.$refs.cond2.getData().then(data => {
                let obj = {
                    fieldCode: this.viewObj.groupFieldCode,
                    filedName: this.viewObj.groupFieldName,
                    startVal: this.groupValue
                }
                data[0].conditions.push(obj);
                this.$emit('search', {
                   senior_conds: this.isView ? this.viewObj.conds : JSON.stringify([]), // 高级查询条件
                   fast_conds: JSON.stringify(data) // 快捷查询条件
               });
            })
        },
        queryGroupOpt() {
            if(this.viewObj.groupFieldCode) {
                let obj = this.condOpt.find(item => item.value == this.viewObj.groupFieldCode);
                if(obj) {
                    let elemCascCode = obj.elemCascCode;
                    if(elemCascCode) {
                        dictionary(elemCascCode).then(res => {
                            if(res.data.code == 1000) {
                                let data = res.data.data;
                                if(Array.isArray(data)) {
                                    this.groupOpt = data.map(item => {
                                        return {
                                            label: item.name,
                                            value: item.valStr
                                        }
                                    })
                                }
                            }
                        })
                    }
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.search-box {
    .search-form {
        .search-input {
            display: inline-block;
            vertical-align: top;
        }
    }
    .status-bar {
        line-height: 24px;
        padding-bottom: 10px;
        > span {
            display: inline-block;
            height: 24px;
            line-height: 24px;
            padding: 0px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 12px;
            cursor: pointer;
            margin-right: 10px;
            &.active {
                background: #ddd;
                color: #fff;
            }
        }
    }
    .btn-wrap {
        position: relative;
    }
}
</style>


